<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.List" %>
<%@ page import="javax.servlet.http.HttpSession" %>
<%@ page import="cn.edu.lingnan.pojo.ScoreDTO" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>成绩展示</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script type="text/javascript">
        function filterScores() {
            var selectedGrade = document.getElementById("gradeSelect").value;
            var allRows = document.getElementsByClassName("scoreRow");
            for (var i = 0; i < allRows.length; i++) {
                var grade = allRows[i].getAttribute("data-grade");
                if (grade === selectedGrade) {
                    allRows[i].style.display = "";
                } else {
                    allRows[i].style.display = "none";
                }
            }
            updateChart(selectedGrade);
        }

        function updateChart(grade) {
            var scores = [];
            var courseNames = [];
            var allRows = document.getElementsByClassName("scoreRow");
            for (var i = 0; i < allRows.length; i++) {
                if (allRows[i].getAttribute("data-grade") === grade) {
                    scores.push(parseInt(allRows[i].getAttribute("data-score")));
                    courseNames.push(allRows[i].getAttribute("data-cname"));
                }
            }
            var ctx = document.getElementById('scoreChart').getContext('2d');
            var chart = Chart.getChart(ctx);
            if (chart) {
                chart.destroy();
            }
            new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: courseNames,
                    datasets: [{
                        label: '分数',
                        data: scores,
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }

        function toggleChart() {
            var chartContainer = document.getElementById("chartContainer");
            if (chartContainer.style.display === "none") {
                chartContainer.style.display = "block";
            } else {
                chartContainer.style.display = "none";
            }
        }

        function calculateGPA(score) {
            if (score >= 60) {
                return ((score - 60) * 0.1 + 1.0).toFixed(1);
            } else {
                return 0.0;
            }
        }
    </script>
</head>
<body onload="filterScores()" class="bg-light">
<div class="container mt-5">
    <h1 class="mb-4" style="text-align: center;">学生成绩</h1>

    <div class="form-group d-flex align-items-center">
        <label for="gradeSelect" class="mr-2" style="line-height: 34px;">选择年级:</label>
        <select id="gradeSelect" class="form-control w-25 mr-2" onchange="filterScores()">
            <option value="1">大一</option>
            <option value="2">大二</option>
            <option value="3">大三</option>
            <option value="4">大四</option>
        </select>
        <button class="btn btn-primary" onclick="toggleChart()">显示/隐藏成绩条形图</button>
    </div>
    <table class="table table-bordered table-hover" style="text-align: center;">
        <thead class="thead-dark">
        <tr>
            <th>学生编号</th>
            <th>课程编号</th>
            <th>课程名称</th>
            <th>讲师名称</th>
            <th>学生姓名</th>
            <th>时间</th>
            <th>学分</th>
            <th>分数</th>
            <th>绩点</th>
            <th>年级</th>
        </tr>
        </thead>
        <tbody>
        <%
            List<ScoreDTO> scores = (List<ScoreDTO>) session.getAttribute("scores");
            if (scores != null) {
                for (ScoreDTO score : scores) {
                    String grade = "";
                    switch(score.getGrade()) {
                        case 1: grade = "大一"; break;
                        case 2: grade = "大二"; break;
                        case 3: grade = "大三"; break;
                        case 4: grade = "大四"; break;
                    }
                    double gpa = (score.getScore() >= 60) ? ((score.getScore() - 60) * 0.1 + 1.0) : 0.0;
                    String rowClass = (score.getScore() < 60) ? "text-danger" : "";
        %>
        <tr class="scoreRow <%= rowClass %>" data-grade="<%= score.getGrade() %>" data-score="<%= score.getScore() %>" data-cname="<%= score.getCname() %>">
            <td><%= score.getSid() %></td>
            <td><%= score.getCid() %></td>
            <td><%= score.getCname() %></td>
            <td><%= score.getTname() %></td>
            <td><%= score.getSname() %></td>
            <td><%= score.getCtime() %></td>
            <td><%= score.getCredit() %></td>
            <td><%= score.getScore() %></td>
            <td><%= String.format("%.1f", gpa) %></td>
            <td><%= grade %></td>
        </tr>
        <%
                }
            }
        %>
        </tbody>
    </table>
    <div id="chartContainer" style="display:none;">
        <canvas id="scoreChart" width="400" height="200"></canvas>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
